<template>
  <div id="classDetailHeader">
    <span 
      :class="isActive==index?'active':''" 
      v-for="(item,index) in categoryList" 
      :key="index"
      @click="handleActive(index)"
    >{{item}}</span>
  </div>
</template>

<script>
export default {
  props:['categoryList'],
  data() {
    return {
      isActive:0
    }
  },
  methods: {
    handleActive(n){
      this.isActive = n
    }
  },

}
</script>

<style>
@import url('../assets/css/classDetailHeader.css');
</style>